<template>
  <el-dialog class="dialog-class" :title="title" v-model="visible" >
    <template #header>
      <div class="dialog-header">
        <div class="left">
          <img src="@/assets/images/add.png" alt="">
          <span>{{ title }}</span>
        </div>
      </div>
    </template>
    <el-form class="dialog-form" ref="sbdaRef" :model="form" :rules="rules" label-position="left" label-width="auto">
      <div class="add-device-container">
        <el-form-item label="设备编号" prop="sbbh">
          <el-input v-model="form.sbbh" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="设备名称" prop="sbmc">
          <el-input v-model="form.sbmc" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="设备位置说明" prop="sbwz">
          <el-input v-model="form.sbwz" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="所属实训室" prop="sys">
          <el-select v-model="form.sys" class="m-2 full" placeholder="请选择">
            <el-option v-for="item in sxsOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="品牌名称" prop="pp">
          <el-select v-model="form.pp" class="m-2 full" placeholder="请选择">
            <el-option v-for="item in ppOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备型号" prop="sbxh">
          <el-input v-model="form.sbxh" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="设备参数" prop="sbcs">
          <el-input v-model="form.sbcs" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="出场日期" prop="ccrq">
          <el-date-picker class="full" clearable v-model="form.ccrq" type="date" value-format="YYYY-MM-DD"
            placeholder="请选择出场日期">
          </el-date-picker>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <div class="save-btn" @click="submitForm">保存</div>
        <div class="cancel-btn" @click="cancel">取消</div>
      </div>
    </template>
  </el-dialog>
</template>
  
<script setup>
import { addSbda, updateSbda } from "@/api/system/sbda";
import { ElMessage } from "element-plus";
const emits = defineEmits(['update:open', 'finish'])
const sbdaRef = ref(null)
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  params: {
    type: Object,
    default: () => { return {} }
  },
  title: {
    type: String,
    default: ''
  },
})
const visible = computed({
  get: () => {
    return props.open
  },
  set: (value) => {
    emits('update:open', value)
  }
})
const form = ref({
  sbbh: null,
  sbmc: null,
  sbxh: null,
  sbwz: null,
  sys: null,
  ccrq: null,
  pp: null,
  sbcs: null
})
// 取消按钮
function cancel() {
  visible.value = false;
}
// 表单重置
function reset() {
  form.value = {
    sbbh: null,
    sbmc: null,
    sbxh: null,
    sbwz: null,
    sys: null,
    ccrq: null,
    pp: null,
    sbcs: null
  };
}
watch(()=>props.open, value=>{
  if (value && props.params) {
    form.value = props.params
  }else {
    reset()
  }
})
/** 提交按钮 */
function submitForm() {
  sbdaRef.value.validate(valid => {
    if (valid) {
      if (props.title === '修改设备档案') {
        updateSbda(form.value).then(response => {
          ElMessage.success("修改成功");
          visible.value = false;
          reset()
          emits('finish')
        });
      } else {
        addSbda(form.value).then(response => {
          ElMessage.success("新增成功");
          visible.value = false;
          reset()
          emits('finish')
        });
      }
    }
  });
}
const rules = reactive({
  sbbh: [
    { required: true, message: '请填写设备编号', trigger: 'blur' },
  ],
  sbmc: [
    { required: true, message: '请填写设备名称', trigger: 'blur' },
  ],
  sbwz: [
    { required: true, message: '请填写设备位置说明', trigger: 'blur' },
  ],
  sys: [
    {
      required: true,
      message: '请选择所属实训室',
      trigger: 'change',
    },
  ],
  pp: [
    {
      required: true,
      message: '请选择品牌名称',
      trigger: 'change',
    },
  ],
  sbxh: [
    { required: true, message: '请填写设备型号', trigger: 'blur' },
  ],
  sbcs: [
    { required: true, message: '请填写设备参数', trigger: 'blur' },
  ],
  ccrq: [
    {
      required: true,
      message: '请选择出厂日期',
      trigger: 'change',
    },
  ]
})

const sxsOptions = ['算力中心', '智慧工厂虚拟仿真实训室',
  '生产线装调仿真实训室', '输送转运仿真实训室',
  '生产加工虚拟仿真实训室', 'VR仿真实训室',
  '沉浸式仿真实训室', '体验中心',
  '研创中心', '创新创业实训室']
const ppOptions = ['戴尔', '华为', '天昊', '爱维达', '海信']
</script>
<style lang="scss">
.full {
  width: 100%;
}

.dialog-class {
  background-image: url("@/assets/images/dialog-bg.png");
  background-color: rgba(0, 0, 0, 0);
  background-size: 100% 100%;
  width: 1060px;
  height: 440px;
  padding: 20px;
  top: 100px;
  overflow: hidden;

  .dialog-form {
    width: 1103px;

    .add-device-container {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 40%);
      grid-column-gap: 5%;

      :deep(.el-input__wrapper) {
        background: none !important;
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        border: 1px solid #50a6eb;

        .el-input__inner {
          cursor: default !important;
          color: #dffdfe;
          font-size: 14px;
        }
      }
    }

  }
}
</style>
<style lang="scss" scoped>
.dialog-header {
  .left {
    display: flex;
    align-items: center;

    img {
      width: 24px;
      height: 24px;
    }

    span {
      margin-left: 5px;
      color: #7dc1f7;
      font-size: 14px;
    }
  }

  // height: 90px;
}

.dialog-footer {
  display: flex;
  justify-content: center;

  .save-btn {
    background-image: url("@/assets/images/save.png");
    background-size: 100% 100%;
    width: 200px;
    height: 40px;
    padding-top: 10px;
    color: #dffdfe;
    text-align: center;
  }

  .cancel-btn {
    background-image: url("@/assets/images/cancel.png");
    background-size: 100% 100%;
    width: 200px;
    height: 40px;
    padding-top: 10px;
    margin-left: 40px;
    color: #dffdfe;
    text-align: center;
  }
}
</style>